<template>
  <div class="login-contianer" v-loading="loading">
    <h3 class="loginTitle">智慧大屏系统</h3>
    <div class="login-from">
      <el-form class="form" ref="form" :model="form" label-width="0">
        <el-form-item>
          <el-input
            class="user"
            placeholder="请输入账号"
            v-model="form.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            class="password"
            type="password"
            placeholder="请输入密码"
            v-model="form.password"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: left">
          <el-checkbox v-model="isAutoLogin">自动登录</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button
            type="small"
            :disabled="isCanLogin"
            :class="isCanLogin ? 'bg2' : 'bg1'"
            style="width: 100%"
            @click="onSubmit"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <p class="header-footer">Copyright@2022金熊猫新媒体科技有限公司</p>
    <!-- <img src="../assets/loginBg.png" class="loginbg" alt="" srcset=""> -->
  </div>
</template>

<script>
export default {
  name: "LoginPage",
  data() {
    return {
      isAutoLogin: false,
      loading: false,
      form: {
        username: "admin",
        password: "admin",
      },
    };
  },
  computed: {
    isCanLogin() {
      return this.form.username && this.form.password ? false : true;
    },
  },
  methods: {
    async onSubmit() {
      this.loading = true;
      if (this.isAutoLogin) {
        localStorage.setItem("loginInfo", JSON.stringify(this.form));
      }
      try {
        const resultObj = await this.$API.login(this.form);
        this.loading = false;
        localStorage.setItem("loginKey", resultObj.tokenValue);
        this.$message.success("登录成功");
        setTimeout(() => {
          this.$router.push("/tenant/index");
        }, 1000);
      } catch (err) {
        this.loading = false;
      }
    },
  },
  created() {
    const loginform = localStorage.getItem("loginInfo") || "";
    if (loginform) {
      let form = JSON.parse(loginform);
      if (form.username && form.password) {
        this.onSubmit();
      }
    }
  },
};
</script>
<style scoped lang="scss">
.login-contianer {
  background: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../assets/loginBg.png") no-repeat 100% 10%;
  background-origin: left;
  .loginTitle {
    position: absolute;
    top: 10%;
    left: 5%;
    font-family: MicrosoftYaHeiSemibold;
    color: #00b3a8;
    line-height: 46px;
  }
  .loginbg {
    float: right;
    height: 100%;
  }
  .login-from {
    width: 300px;
    position: absolute;
    top: 20%;
    left: 5%;
    height: 500px;
    ::v-deep .el-input__inner {
      text-indent: 20px;
    }
    .user::v-deep .el-input__inner {
      background: url("../assets/loginUser.png") no-repeat 10px center;
    }
    .password::v-deep .el-input__inner {
      background: url("../assets/loginPwd.png") no-repeat 10px center;
    }
    .bg2 {
      background: #d3e1e1;
      border-color: #d3e1e1;
      color: #fff;
    }
  }
  .header-footer {
    position: absolute;
    bottom: 5%;
    left: 5%;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 19px;
  }
}
</style>
